<template>
  <d2-container better-scroll>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="期货匹配" name="first">
          <v-futuresMatch ref="child1" class="is-active"></v-futuresMatch>
        </el-tab-pane>
        <el-tab-pane label="期权匹配" name="second">
          <v-optionMatch ref="child2"></v-optionMatch>
        </el-tab-pane>
        <el-tab-pane label="现货匹配" name="third">
          <v-spotMatch ref="child3"></v-spotMatch>
        </el-tab-pane>
      </el-tabs>
    </div>
  </d2-container>
</template>
<script>
import futuresMatch from "./componnets/match_management/futuresMatch.vue";
import optionMatch from "./componnets/match_management/optionMatch.vue";
import spotMatch from "./componnets/match_management/spotMatch.vue";
export default {
  components: {
    "v-futuresMatch": futuresMatch,
    "v-optionMatch": optionMatch,
    "v-spotMatch": spotMatch
  },
  data() {
    return {
      activeName: "first",
      futuresMatch,
      optionMatch,
      spotMatch
    };
  },
  methods: {
    updateType() {
      let type = this.$route.query.type;
      // 判断type的值，更改activeName的值
      if (type === "first") {
        this.activeName = "first";
      } else if (type === "second") {
        this.activeName = "second";
      } else if (type === "third") {
        this.activeName = "third";
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {
    this.updateType();
  }
};
</script>
<style>
.el-input.is-disabled .el-input__inner {
  background-color: #fff !important;
  color: #606266 !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff !important;
  color: #606266 !important;
}
</style>
